<!--
 * @Author: pancc 527847805@qq.com
 * @Date: 2023-04-19 13:07:23
 * @LastEditors: pancc 527847805@qq.com
 * @LastEditTime: 2023-04-19 14:47:10
 * @FilePath: \pcj\src\page\operlogs\loginlog.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="flexible loginLog">
        <ul class="header-buttons">
            <li>
                <z-button title="刷新" icon="refresh" color="#40485b" @click="pageQuery"> </z-button>
            </li>
            <li class="dis-flex">
                <p>
                    <el-input v-model="params.keyword" v-debounce="pageQuery" @clear="pageQuery" placeholder="支持名称模糊搜索"
                        clearable class="mr-10"></el-input>
                </p>
            </li>
        </ul>
        <el-table :data="table.data" class="flexible-table" border stripe @selection-change="onTableChange" tooltip-effect>
            <!-- <el-table-column type="selection" align="center" width="55" /> -->
            <el-table-column type="index" label="序号" align="center" width="60" />
            <el-table-column label="登录IP" align="center" prop="loginIp" />
            <el-table-column label="登录来源" align="center" prop="loginTypeName" />
            <el-table-column label="登录人" align="center" prop="creatorUserName" />
            <el-table-column label="登录时间" align="center" prop="creationTime" />

        </el-table>
        <div class="flexible-pagination">
            <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
                :page-sizes="[10, 30, 60, 100]" background layout="total, sizes, prev, pager, next, jumper"
                :total="table.totalCount" @size-change="handleSizeChange" @current-change="pageQuery" />
        </div>
    </div>
</template>
<script setup>
import { post } from '@/api/index';
let { purview } = inject('$global');
let $message = inject('$message');
let day = inject('$day');
let table = reactive({
    data: [],
    totalCount: 0
});
let params = reactive({
    pageIndex: 1,
    pageSize: 30,
    keyword: ''
});
const pageQuery = async () => {
    let { result } = await post('LoginLogRecord/GetPage', params);
    table.data = result.items.map(r => {
        return {
            ...r,
            ...{
                creationTime: day(r.creationTime).format('YYYY-MM-DD HH:mm:ss')
            }
        };
    });
    if (result.columnJson) table.columns = JSON.parse(result.columnJson);
    table.totalCount = result.totalCount;
};
const handleSizeChange = val => {
    params.pageIndex = 1;
    pageQuery();
};
// 初始化
onActivated(() => {
    pageQuery();
});
</script>
  
<style lang="scss" scoped>
.loginLog {
    background-color: #fff;
}

.header-buttons {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}
</style>